<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<title></title>
	<link rel="stylesheet" href="../classtablelayer/theme/default/layer.css">
	<link rel="stylesheet" type="text/css" href="../classcss/reponse.css">
	<link rel="stylesheet" href="/CSS/toPage.css">
	<link rel="stylesheet" type="text/css" href="/CSS/table.css" />

	<link rel="stylesheet" type="text/css" href="/CSS/form.css" />


	<!--分页表格的样式-->
	<link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
	<link rel="stylesheet" href="/CSS/css/jquery.paginate.css" />
	<link rel="stylesheet" href="/CSS/css/jquery.yhhDataTable.css" />
	<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
	<script type="text/javascript" src="/JS/js/jquery.paginate.js" ></script>
	<script type="text/javascript" src="/JS/js/jquery.yhhDataTable.js" ></script>
	<script type="text/javascript" src="/JS/js/index.js" ></script>

	<link rel="stylesheet" href="/font_cqbiizu5og9/iconfont.css">

	<style type="text/css">
		.alertceng{
			background: #FFFFFF;
			padding: 10px;
			display: none;
		}
		.alertceng span.title{
			margin-right: 10px;
		}
	</style>
</head>
<body>
<input type="button"value="点击修改个人信息">

<div class="layui-fluid layadmin-homepage-fluid" style="background: #fff;width:90%;margin:0 auto;">

	<div id="page">
		<div class="btn-container" style="height: 10px">
			<button class="layui-btn" onclick="addtr();">新增一行</button>
			<button class="layui-btn" onclick="ExportExcel();">导出Excel</button>
			<button class="layui-btn" onclick="resivetabledata();">获取table数据</button>
			<button class="layui-btn" onclick="reloadtable();">刷新table表格</button>
			<button class="layui-btn" onclick="coldata();">获取某一列的数据</button>
		</div>
		<div class="container" >  <tbody><table id="testtable1" class="reponsetable" ></table></tbody></div>

		<script type="text/html" id="editer">
			<a class="layui-btn layui-btn-xs" onclick="edittr(this)">编辑</a>
			<a class="layui-btn layui-btn-xs" onclick="deletetr(this)">删除</a>
			<a class="layui-btn layui-btn-xs" onclick="uptr(this)">上移</a>
			<a class="layui-btn layui-btn-xs" onclick="downtr(this)">下移</a>
		</script>
	</div>
</div>
<div id="editcontent" class="alertceng">

	<p><span class="title">课程名称:</span><label for="Name"></label><input type="text" id="Name"/></p>
	<p><span class="title">课序号:</span><label for="XuHao"></label><input type="text" id="XuHao"/></p>
	<p><span class="title">代课老师:</span><label for="Teacher"></label><input type="text" id="Teacher"/></p>
	<p><span class="title">上课时间:</span><label for="Time"></label><input type="text" id="Time"/></p>
	<p><span class="title">上课地点:</span><label for="Position"></label><input type="text" id="Position"/></p>
	<p><span class="title">课程人数上限:</span><label for="Data"></label><input type="text" id="Data"/></p>
</div>
</body>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" src="../classjs/jquery.basictable.min.js"></script>
<script type="text/javascript" src="../classjs/reponsetable.min.js"></script>
<script type="text/javascript" src="../classtablelayer/layer.js"></script>
<script type="text/javascript">

	$(function(){
		$('#testtable1').basictable({
			breakpoint: 768
		});
		$("#testtable1").reponsetable({
			"id":"table",
			"operation": "editer",
			"type":"numbers",
			"colum": [
				{"field": "Name","title": "课程名称"},
				{"field": "XuHao","title": "课序号"},
				{"field": "Teacher","title": "代课老师"},
				{"field": "Time","title": "上课时间"},
				{"field": "Position","title": "上课地点"},
				{"field": "Data","title": "课程人数上限"}
			],
			"data": [
				{"Name": "Java高级程序设计语言","XuHao": 900,"Teacher": "李老师","Time": "1","Position":"4区101","Data": "90"},
				{"Name": "Java高级程序设计语言","XuHao": 900,"Teacher": "李老师","Time": "1","Position":"4区101","Data": "90"},
				{"Name": "Java高级程序设计语言","XuHao": 900,"Teacher": "李老师","Time": "1","Position":"4区101","Data": "90"},
				{"Name": "Java高级程序设计语言","XuHao": 900,"Teacher": "李老师","Time": "1","Position":"4区101","Data": "90"},
				{"Name": "Java高级程序设计语言","XuHao": 900,"Teacher": "李老师","Time": "1","Position":"4区101","Data": "90"},
				{"Name": "Java高级程序设计语言","XuHao": 900,"Teacher": "李老师","Time": "1","Position":"4区101","Data": "90"},
			]
		});

	})
	function addtr() {
		layer.open({
			type: 1,
			title: '编辑课程信息',
			closeBtn: 1,
			area: '516px',
			skin: '#fff', //没有背景色
			shadeClose: true,
			content: $('#editcontent'),
			btn:["保存","关闭"],
			btn1:function(index,layero){
				var Name=$("#Name").val();
				var XuHao=$("#XuHao").val();
				var Teacher=$("#Teacher").val();
				var Time=$("#Time").val();
				var Position=$("#Position").val();
				var Data=$("#Data").val();
				var obj = {
					"Name":Name,
					"XuHao": XuHao,
					"Teacher": Teacher,
					"Time": Time,
					"Position": Position,
					"Data":Data
				};
				reponse.addtr(obj, "table");
				//reponse.editsavetr(obj, "table");
				layer.close(index);
			},btn2:function(index,layero){
				layer.close(index);
			}
		});
	};
	function uptr(btn, e) {
		var tr = $(btn).parent().parent();
		reponse.moveuptr(tr, "table");
	}
	function downtr(btn, e) {
		var tr = $(btn).parent().parent();
		reponse.moveDown(tr, "table");
	}
	function ExportExcel() {
		var tableobj=$("#testtable1").data("tableObj");
		reponse.JSONToCSVConvertor(tableobj, true,"人员表格");
	}
	function resivetabledata() {
		var pp = $("#testtable1").data("tableObj").data;
		var mydata = JSON.stringify(pp);
		alert(mydata);

		$.ajax({
			type: "GET",
			url: '/MyWeb/course/update',
			dataType: "json",
			data:mydata,//json数据

			success: function (result) {
				console.log(result);
			},
			error: function (XMLHttpRequest, textStatus, errorThrown) {
				alert(XMLHttpRequest.status);
				alert(XMLHttpRequest.readyState);
				alert(textStatus);
			}
		});
	}
	function reloadtable(){
		var data=[
			{"Name": "Java高级程序设计语言","XuHao": 900,"Teacher": "李老师","Time": "1","Position":"4区101","Data": "90"},
		]
		reponse.reloadtable(data,"table");
	}
	function edittr(a, e) {
		var tr = $(a).parent().parent();
		reponse.resiverowdata(tr, "table");
		var rowdata=$("#testtable1").data("rowdata");
		//alert(JSON.stringify(rowdata));

		layer.open({
			type: 1,
			title: '编辑人员信息',
			closeBtn: 1,
			area: '516px',
			skin: '#fff', //没有背景色
			shadeClose: true,
			content: $('#editcontent'),

			btn:["保存","关闭"],
			btn1:function(index,layero){
				var Name=$("#Name").val();
				var XuHao=$("#XuHao").val();
				var Teacher=$("#Teacher").val();
				var Time=$("#Time").val();
				var Position=$("#Position").val();
				var Data=$("#Data").val();
				var obj = {
					"Name":Name,
					"XuHao": XuHao,
					"Teacher": Teacher,
					"Time": Time,
					"Position": Position,
					"Data":Data
				};
				reponse.editsavetr(obj, "table");
				layer.close(index);
			},btn2:function(index,layero){
				layer.close(index);
			}
		});
	}
	function deletetr(a, e) {
		var tr = $(a).parent().parent();
		reponse.deletetr(tr, e);
	}
	function coldata(){
		var pp=reponse.Columndata("Name","table");
		alert(pp);
	}
</script>

</html>